import React, { Component } from 'react'

import './index.scss'
import TopNav from '../../component/TopNav'
import SearchInput from '../../component/SearchInput'

// http
import myaxios from '../../utils/myaxios'
import { withRouter } from 'react-router-dom'

class index extends Component {
  state = {
    menu_list: [],
    selectedIndex: 0,
    cateitems: []

  }
  componentDidMount() {
    let categories_cach = localStorage.getItem("categories_cach")
    if (categories_cach) {
      categories_cach = JSON.parse(categories_cach);
      if (categories_cach.date - Date.now() > 60 * 60 * 1000) {
        // 获取分类信息
        this.getCategories()
      } else {
        this.setState({ menu_list: categories_cach.categories })
        this.setState({ cateitems: categories_cach.categories[this.state.selectedIndex].children },)
      }

    } else {
      // 获取分类信息
      this.getCategories()
    }

  }
  // 获取分类信息
  getCategories = () => {
    myaxios.get('categories').then(data => {
      let categories_cach = {
        date: Date.now(),
        categories: data.message
      }
      localStorage.setItem("categories_cach", JSON.stringify(categories_cach));

      this.setState({ menu_list: data.message })
      this.setState({ cateitems: this.state.menu_list[this.state.selectedIndex].children })
    })
  }
  handleMenuClick = (e) => {
    let selecedIndex = e.target.getAttribute("data-index");
    if (!selecedIndex) return;
    this.setState({
      selectedIndex: parseInt(selecedIndex),
      cateitems: this.state.menu_list[selecedIndex].children
    })

  }
  handleProductItemClick = (e) => {
    if (e.target.nodeName === "IMG") {
      let cat_id = e.target.getAttribute("data-index");
      this.props.history.push("/goodList/" + cat_id)
    }
  }
  render() {
    return (
      <div className="yg-category">
        <TopNav>商品分类</TopNav>
        <SearchInput></SearchInput>
        <div className="yg-category-menu-list">
          <div className="menu-left">
            <div className="menu-left-box" onClick={this.handleMenuClick}>
              {
                this.state.menu_list.map((v, index) => <div data-index={index} className={this.state.selectedIndex === index ? "menu-item active" : "menu-item"} key={v.cat_id}>{v.cat_name}</div>)
              }
            </div>
          </div>
          <div className="menu-right">
            <div className="menu-right-box">
              {this.state.cateitems.map(v => (
                <div className="cateitem-section" key={v.cat_id}>
                  <h2>/{v.cat_name}/</h2>
                  <div className="cateitem-box" onClick={this.handleProductItemClick}>
                    {v.children && v.children.map(c => (
                      <div className="cateitem-item" key={c.cat_id}>
                        <img src={c.cat_icon} data-index={c.cat_id} alt="" />
                        <h3>{c.cat_name}</h3>
                      </div>
                    ))}
                  </div>
                </div>
              ))}

            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default withRouter(index)